<template>
    <div class="content">
        <!-- 轮播图 -->
        <carousel></carousel>
        <!-- 搜索框 -->
        <search></search>
        <!-- 医院地区选择 -->
        <el-row :gutter="20">
            <el-col :span="20">
                <h1 class="hos">医院</h1>
                <hosptial data="HOSTYPE" LD="等级" @getLevel="getLevel" @clickH="clickH"></hosptial>
                <hosptial data="Beijin" LD="地区" @getDist="getDist" @clickH="clickH"></hosptial>
                <!-- 医院数据card -->
                <div class="hosCard">
                    <hospimg v-if="hospitalCon?.length >0" v-for="(item, index) in hospitalCon"
                        :hospital="hospitalCon![index]" :key="index" class="hosImg"  @click="goDetail(item)"></hospimg>
                    <el-empty v-else description="description" class="empty" />
                </div>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
                    :background="true" layout=" prev, pager, next, ->,total, sizes,jumper" :total="total"
                    @size-change="handleChange" @current-change="handleChanges" />
            </el-col>
            <!-- 右侧静态 -->
            <el-col :span="4">
                <rightStatic></rightStatic>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import carousel from "../home/carousel/index.vue"
import search from "../home/search/index.vue"
import hosptial from "../home/sel/hospital/index.vue"
import hospimg from "../home/hospImg/index.vue";
import rightStatic from "../home/rightStatic/index.vue";
import { getPageList } from "@/api/hospital/index";
import type { concentList, hospitalList, hos } from "@/api/hospital/type";
import { useRouter,useRoute } from "vue-router";

let $router = useRouter();
let $route = useRouter();
let currentPage = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)
let allData = ref<any>()
// 获取的数据
let hostype = ref<any>()
let districtCode = ref<any>()
// 医院信息
let hospitalCon = ref<concentList | any>()

onMounted(() => {
    getDate();
 
})

// 获取医院数据
const getDate = async () => {
    let result: hospitalList = await getPageList(currentPage.value, pageSize.value, hostype.value, districtCode.value);

    allData.value = result.data
    // 数据总数
    total.value = result.data.totalElements;
    // 要展示数据
    hospitalCon.value = result.data.content;    
}
// 路由跳转
const goDetail = (item: any) => {
    
    $router.push({
        path: "/hospital/registered",
        query: { hosCode: item.hoscode  }
    })
}

const handleChange = () => {
    getDate()
}

const handleChanges = () => {
    getDate()
}
// 自定义事件获取数据
const getLevel = (v: any) => {
    hostype.value = v
    getDate()

}
const getDist = (v: any) => {
    districtCode.value = v
    getDate()
}
const clickH = (v:any) => { 
    if (v == "等级") {
        hostype.value = ''
    } else { 
        districtCode.value = ''
    }
    getDate()
    
}


// 模拟数据
const level = reactive({
    title: "等级",
    content: ["全部", "三级甲等", "三级甲等", "三级甲等", "三级甲等", "三级甲等"]
})
const region = reactive({
    title: "地区",
    content: ["全部", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区", "昌平区"]
})
// 接口出错的数据
const errorData = reactive([
    {
        hosname: "error 模拟1医院",
        param: {
            hostypeString: "三级甲等"
        },
        bookingRule: {
            releaseTime: "7:00"
        },
        logoData: "@/src/assests/images/logo.png"
    },
    {
        hosname: "error 模拟1医院",
        param: {
            hostypeString: "三级甲等"
        },
        bookingRule: {
            releaseTime: "7:00"
        },
        logoData: "@/src/assests/images/logo.png"
    }, {
        hosname: "error 模拟1医院",
        param: {
            hostypeString: "三级甲等"
        },
        bookingRule: {
            releaseTime: "7:00"
        },
        logoData: "@/src/assests/images/logo.png"
    },
    {
        hosname: "error 模拟1医院",
        param: {
            hostypeString: "三级甲等"
        },
        bookingRule: {
            releaseTime: "7:00"
        },
        logoData: "@/src/assests/images/logo.png"
    }

])
// 静态数据
const Department = reactive({
    title: "常见科室",
    liData: [
        {
            name: "神经内科",
            id: 1
        },
        {
            name: "消化内科",
            id: 2
        }, {
            name: "呼吸内科",
            id: 3
        }, {
            name: "内科",
            id: 4
        }, {
            name: "神经外科",
            id: 5
        }, {
            name: "妇科",
            id: 6
        }, {
            name: "产科",
            id: 7
        }, {
            name: "儿科",
            id: 8
        }
    ]
})

</script>

<style scoped lang="scss">
.hos {
    font-size: 20px;
    font-weight: 900;
    color: #ccc;
}

.hosCard {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;

    .hosImg {
        width: 48%;
        margin-top: 15px;
    }
    .empty{
        margin: 0 auto;
    }
}
</style>